import React from "react";
import ThreeAreas from "../../threeareas";

import "./index.css";
export default function AddressComponent() {
  return (
    <div className="tyc_address_component">
      <ul className="tyc_area">
        <li>
          <span className="tyc_red">*</span>
          <strong>收货人姓名：</strong>
          <input type="text" placeholder="可以收货人姓名" />
        </li>
        <li>
          <span className="tyc_red">*</span>
          <strong>所在地区：</strong>
          <ThreeAreas />
        </li>
        <li>
          <span className="tyc_red">*</span>
          <strong>详细地址：</strong>
          <input type="text" placeholder="用于接收货物的详细地址" />
        </li>
        <li>
          <span className="tyc_red">*</span>
          <strong>联系电话：</strong>
          <input type="text" placeholder="推荐使用手机号" />
          或固定电话：
          <input type="text" placeholder="区号" />-
          <input type="text" placeholder="电话号码" />
        </li>
      </ul>
    </div>
  );
}

// import { Form, Input, Select,Button/* , Tooltip,  Space, Typography */ } from "antd";

// const { Option } = Select;

// export default function AddressComponent() {
//   const onFinish = (values) => {
//     console.log("Received values of form: ", values);
//   };

//   return (
//     <Form
//       name="complex-form"
//       onFinish={onFinish}
//       labelCol={{ span: 8 }}
//       wrapperCol={{ span: 16 }}
//     >
//       <Form.Item
//         name=""
//         label="收货人姓名"
//         rules={[{ required: true, message: "收货人姓名是必填项" }]}
//       >
//         <Input style={{ width: 160 }} placeholder="可以收货人姓名" />
//       </Form.Item>

//       <Form.Item
//         label="所在地区"
//         name=""
//         rules={[{ required: true, message: "所在地区是必填项" }]}
//       >
//         <Input.Group compact>
//           <Form.Item
//             name=""
//             // rules={[{ required: true, message: "Province is required" }]}
//           >
//             <Select placeholder="省">
//               <Option value="河南省">Zhejiang</Option>
//               <Option value="河北省">Jiangsu</Option>
//             </Select>
//           </Form.Item>
//           <Form.Item
//             name=""
//             // noStyle
//             // rules={[{ required: true, message: "Province is required" }]}
//           >
//             <Select placeholder="市">
//               <Option value="Zhejiang">Zhejiang</Option>
//               <Option value="Jiangsu">Jiangsu</Option>
//             </Select>
//           </Form.Item>
//           <Form.Item
//             name={["address", "street"]}
//             noStyle
//             // rules={[{ required: true, message: "Street is required" }]}
//           >
//             <Select placeholder="市">
//               <Option value="Zhejiang">Zhejiang</Option>
//               <Option value="Jiangsu">Jiangsu</Option>
//             </Select>
//           </Form.Item>
//         </Input.Group>
//       </Form.Item>
//       <Form.Item
//         name=""
//         label="详细地址"
//         rules={[{ required: true, message: "地址是必填项" }]}
//       >
//         <Input placeholder="用于接收货物的详细地址" style={{ width: 460 }} />
//       </Form.Item>
//       <Form.Item
//         name=""
//         label="联系电话"
//         rules={[{ required: true, message: "联系电话是必填项" }]}
//       >
//         <Input placeholder="推荐使用手机号" style={{ width: 160 }} />
//       </Form.Item>
//       <Form.Item label="" colon={false}>
//         <Button type="primary" htmlType="submit">
//           Submit
//         </Button>
//       </Form.Item>
//     </Form>
//   );
// }
